<template>
  <div>
    <el-row :gutter="40" class="panel-group">
      <el-col :xs="12" :sm="12" :lg="6" class="card-panel-col">
        <div class="card-panel" @click="handleSetLineChartData('/user1/user1')">
          <div class="card-panel-icon-wrapper icon-people">
            <svg-icon icon-class="user" class-name="card-panel-icon"/>
          </div>
          <div class="card-panel-description">
            <div class="card-panel-text">
              累计用户
            </div>
            <div>
              <span class="card-panel-num">
                {{ user[0] }}
                </span>
              <template v-if="user[3]>0">
                <el-tooltip class="item" effect="dark" content="相比上一日" placement="top-start">
                  <span style="color: red;font-weight:bold">↑{{ user[3] / 100 }}%</span>
                </el-tooltip>

              </template>
              <template v-else-if="user[3]<0">
                <el-tooltip class="item" effect="dark" content="相比上一日" placement="top-start">
                  <span style="color: green;font-weight:bold">↓{{ -user[3] / 100 }}%</span>
                </el-tooltip>
              </template>
              <template v-else style="color: grey">
                无增长
              </template>
            </div>
          </div>
        </div>
      </el-col>

      <el-col :xs="12" :sm="12" :lg="6" class="card-panel-col">
        <div class="card-panel" @click="handleSetLineChartData('/user1/user1')">
          <div class="card-panel-icon-wrapper icon-message">
            <svg-icon icon-class="myActiveCount" class-name="card-panel-icon"/>
          </div>
          <div class="card-panel-description">
            <div class="card-panel-text">
              昨日活跃
            </div>
            <div class="card-panel-num">
              {{ yesterdayActiveCount }}
            </div>
          </div>
        </div>
      </el-col>

      <el-col :xs="12" :sm="12" :lg="6" class="card-panel-col">
        <div class="card-panel" @click="handleSetLineChartData('/user1/user1')">
          <div class="card-panel-icon-wrapper icon-money">
            <svg-icon icon-class="myRegisterCount" class-name="card-panel-icon"/>
          </div>
          <div class="card-panel-description">
            <div class="card-panel-text">
              昨日新增
            </div>
            <div class="card-panel-num">
              {{ yesterdayRegisterCount }}
            </div>
          </div>
        </div>
      </el-col>

      <el-col :xs="12" :sm="12" :lg="6" class="card-panel-col">
        <div class="card-panel" @click="handleSetLineChartData('/operationLog/apiReq')">
          <div class="card-panel-icon-wrapper icon-money">
            <svg-icon icon-class="myApiAccessCount" class-name="card-panel-icon"/>
          </div>
          <div class="card-panel-description">
            <div class="card-panel-text">
              接口访问
            </div>
            <div class="card-panel-num">
              {{ apiAccessCount }}
            </div>
          </div>
        </div>
      </el-col>

      <el-col :xs="12" :sm="12" :lg="6" class="card-panel-col">
        <div class="card-panel" @click="handleSetLineChartData('/device/gateway')">
          <div class="card-panel-icon-wrapper icon-message">
            <svg-icon icon-class="myGateway" class-name="card-panel-icon"/>
          </div>
          <div class="card-panel-description">
            <div class="card-panel-text">
              网关数量
            </div>
            <div class="card-panel-num">
              {{ home }}
            </div>
          </div>
        </div>
      </el-col>

      <el-col :xs="12" :sm="12" :lg="6" class="card-panel-col">
        <div class="card-panel" @click="handleSetLineChartData('/device/device')">
          <div class="card-panel-icon-wrapper icon-message">
            <svg-icon icon-class="monitor" class-name="card-panel-icon"/>
          </div>
          <div class="card-panel-description">
            <div class="card-panel-text">
              设备数量
            </div>
            <div class="card-panel-num">
              {{ device }}
            </div>
          </div>
        </div>
      </el-col>

      <el-col :xs="12" :sm="12" :lg="6" class="card-panel-col">
        <div class="card-panel" @click="handleSetLineChartData('/log/systemMessage')">
          <div class="card-panel-icon-wrapper icon-message">
            <svg-icon icon-class="myMessage" class-name="card-panel-icon"/>
          </div>
          <div class="card-panel-description">
            <div class="card-panel-text">
              消息日志
            </div>
            <div class="card-panel-num">
              {{ message }}
            </div>
          </div>
        </div>
      </el-col>

      <el-col :xs="12" :sm="12" :lg="6" class="card-panel-col">
        <div class="card-panel" @click="handleSetLineChartData('/product/productInfo')">
          <div class="card-panel-icon-wrapper icon-product">
            <svg-icon icon-class="myProduct" class-name="card-panel-icon"/>
          </div>
          <div class="card-panel-description">
            <div class="card-panel-text">
              产品研发
            </div>
            <div class="card-panel-num">
              {{ productInfoCount }}
            </div>
          </div>
        </div>
      </el-col>

    </el-row>
  </div>
</template>

<script>
import CountTo from 'vue-count-to'
import { AppUserCount } from '@/api/system/user'
import { getMessageCount } from '@/api/system/message'
import { getDeviceCount } from '@/api/system/device'
import {
  getApiAccessCount,
  getHomeCount,
  getProductInfoCount,
  getYesterdayActiveCount,
  getYesterdayRegisterCount
} from '@/api/system/home'

export default {
  data() {
    return {
      user: [],
      message: 0,
      device: 0,
      home: 0,
      yesterdayRegisterCount: 0,
      yesterdayActiveCount: 0,
      apiAccessCount: 0,
      productInfoCount: 0,
      timer: ''
    }
  },
  components: {
    CountTo
  },

  created() {
    this.getAppUserCount()
    this.getMessageCountFun()
    this.getDeviceCountFun()
    this.getHomeCountFun()
    this.getYesterdayRegisterCountFun()
    this.getYesterdayActiveCountFun()
    this.getApiAccessCountFun()
    this.getProductInfoCountFun()

    this.timer = setInterval(this.intervalFresh, 10000)
    this.webSocketFun()

  },

  // 销毁页面之前清空定时器
  beforeDestroy() {
    clearInterval(this.timer)
  },
  methods: {
    handleSetLineChartData(type) {
      this.$router.push(type)
      // this.$emit('handleSetLineChartData', type)
    },

    // 累计用户
    getAppUserCount() {
      AppUserCount().then(response => {
        this.user = response.data
      })

    },

    // 消息数量
    getMessageCountFun() {
      const self = this
      getMessageCount().then(response => {
        self.message = response.data
      })

    },

    // 设备数量
    getDeviceCountFun() {
      const self = this
      getDeviceCount().then(response => {
        self.device = response.data
      })
    },

    // 网关数量
    getHomeCountFun() {
      const self = this
      getHomeCount().then(response => {
        self.home = response.data
      })
    },

    // 昨日新增
    getYesterdayRegisterCountFun() {
      getYesterdayRegisterCount().then(response => {
        if (response.data) {
          this.yesterdayRegisterCount = response.data
        }
      })
    },

    // 昨日活跃
    getYesterdayActiveCountFun() {
      getYesterdayActiveCount().then(response => {
        if (response.data) {
          this.yesterdayActiveCount = response.data
        }
      })
    },

    // 接口访问
    getApiAccessCountFun() {
      getApiAccessCount().then(response => {
        if (response.data) {
          this.apiAccessCount = response.data
        }
      })
    },
    // 产品研发
    getProductInfoCountFun() {
      getProductInfoCount().then(response => {
        if (response.data) {
          this.productInfoCount = response.data
        }
      })
    },

    intervalFresh() {
      this.getAppUserCount()
      this.getApiAccessCountFun()
      this.getHomeCountFun()
      this.getDeviceCountFun()
      this.getMessageCountFun()
      this.getProductInfoCountFun()
    },

    /*open() {
      this.$notify.success({
        title: '新用户提醒',
        message: '一名新用户注册',
        duration:2000,
        showClose: false
      });
    },*/
    openMessage() {

      this.$notify.success({
        title: '新消息提醒',
        message: '产生一条新的推送消息',
        duration: 2000,
        showClose: false
      })
    },
    openUser() {

      this.$notify.success({
        title: '新用户注册提醒',
        message: '一名新用户注册',
        duration: 2000,
        showClose: false
      })
    },
    open1() {
      const h = this.$createElement
      this.$notify({
        title: '新用户提醒',
        message: h('i', { style: 'color: teal' }, '有一名新用户注册')
      })
    },

    webSocketFun() {
      const self = this
//设置一个变量，用于存储websocket
      let socket = null

//判断当前浏览器是否支持WebSocket
      if ('WebSocket' in window) {
        //alert('当前浏览器支持WebSocket')
        //实现化WebSocket对象，指定要连接的服务器地址与端口  建立连接
        //这个url必须写对！ws固定的，ip是自己配置的，路径是自己命名的
        socket = new WebSocket('ws://manage.zyzncloud.com:8989/websocket')
      } else {
        alert('当前浏览器 Not support websocket')
      }

//连接成功（回调方法）
      socket.onopen = function() {
        // alert("Socket 连接成功");
      }

//连接错误（回调方法）
      socket.onerror = function() {
        //alert('连接出错')
        //可尝试刷新页面--循环
        //window.location.reload();
      }

//接收消息（回调方法）
      socket.onmessage = function(event) {
        //alert("刷新页面")
        //console.log("ccc")
        if (event.data === 'message') {
          self.openMessage()
          self.message = self.message + 1
        }
        if (event.data === 'user') {
          self.openUser()
          self.user[0] = self.user[0] + 1
        }

        // pp.getMessageCountFun();
        //pp.user = event.data
        //alert("你收到了一条返回消息："+event.data);
      }

//连接关闭（回调方法）
      socket.onclose = function() {
        // alert("连接关闭");
      }

//窗口关闭，关闭websocket（否则server端会抛异常）
      window.onbeforeunload = function() {
        socket.close()
      }
    }

  }
}
</script>

<style lang="scss" scoped>
.panel-group {
  margin-top: 18px;

  .card-panel-col {
    margin-bottom: 32px;
  }

  .card-panel {
    height: 108px;
    cursor: pointer;
    font-size: 12px;
    position: relative;
    overflow: hidden;
    color: #666;
    background: #fff;
    box-shadow: 4px 4px 40px rgba(0, 0, 0, .05);
    border-color: rgba(0, 0, 0, .05);

    &:hover {
      .card-panel-icon-wrapper {
        color: #fff;
      }

      .icon-people {
        background: #40c9c6;
      }

      .icon-message {
        background: #36a3f7;
      }

      .icon-money {
        background: #f4516c;
      }

      .icon-shopping {
        background: #34bfa3
      }

      .icon-product {
        background: #306aad;
      }
    }

    .icon-people {
      color: #40c9c6;
    }

    .icon-message {
      color: #36a3f7;
    }

    .icon-money {
      color: #f4516c;
    }

    .icon-shopping {
      color: #34bfa3
    }

    .card-panel-icon-wrapper {
      float: left;
      margin: 14px 0 0 14px;
      padding: 16px;
      transition: all 0.38s ease-out;
      border-radius: 6px;
    }

    .card-panel-icon {
      float: left;
      font-size: 48px;
    }

    .card-panel-description {
      float: right;
      font-weight: bold;
      margin: 26px;
      margin-left: 0px;

      .card-panel-text {
        line-height: 18px;
        color: rgba(0, 0, 0, 0.45);
        font-size: 16px;
        margin-bottom: 12px;
      }

      .card-panel-num {
        font-size: 16px;
      }
    }
  }
}

@media (max-width: 550px) {
  .card-panel-description {
    display: none;
  }

  .card-panel-icon-wrapper {
    float: none !important;
    //width: 100%;
    //height: 100%;
    width: 20px;
    height: 20px;
    margin: 0 !important;

    .svg-icon {
      display: block;
      margin: 14px auto !important;
      float: none !important;
    }
  }
}
</style>
